// 导入 createRouter 函数创建路由、导入createMemoryHistory 配置映射模式
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";

// 配置路由列表
const routes = [
    // 配置重定向
    {

        path: '/',         // 重定向
        redirect: '/home', // 页面映射路径
    },
    {
        // 路由名称、记录路由唯一的名称
        name: 'home',
        // 页面映射路径
        path: '/home',
        // 页面路径、并配置路由懒加载
        component: () => import('../components/13_页面跳转_router/home.vue'),
        // 路由自定的数据
        meta: { title: '首页' },
        // 配置子路由
        // children: [{}]
    },

    {
        name: 'my',
        path: '/my/:id', // 动态路由 在路径后面可配置参数
        component: () => import('../components/13_页面跳转_router/my.vue'),
        meta: { title: '我的' }
    },
    {
        name: 'login',
        path: '/login',
        component: () => import('../components/13_页面跳转_router/login.vue'),
        meta: { title: '登录' }
    },

    // 配置 404 页面
    {
        path: '/:pathMatch(.*)',
        component: () => import('../components/13_页面跳转_router/404.vue')
    }
]

// 通过 createRouter创建路由
const router = createRouter({
    // http://localhost:5173/#/home
    // history: createWebHashHistory(), 

    // http://localhost:5173/home
    history: createWebHistory(),


    routes
})


/**
 * 路由守卫
 * router,beforeEach 在进行路由跳转之前、传入到befroeEach的函数都回调
 */
router.beforeEach((to, from) => {
    /**
     *  to 进入的路由页面
     * from 离开的路由页面
     */
    // 获取 token
    const token = localStorage.getItem('token')
    
    // 判断 如果token为空 兵器 跳转的页面 不是登录页面、就自动跳转登录页面进行登录
    if (!token && to.path != '/login') {
        return '/login'
    }
})



export default router